.bounty-grid {
  --gray-50: 248, 250, 252;
  --gray-100: 241, 245, 249;
  --gray-200: 226, 232, 240;
  --gray-300: 203, 213, 225;
  --gray-400: 148, 163, 184;
  --gray-500: 100, 116, 139;
  --gray-600: 71, 85, 105;
  --gray-700: 51, 65, 85;
  --gray-800: 30, 41, 59;
  --gray-900: 15, 23, 42;
  --gray-950: 2, 6, 23;

  --accent-50: 239, 246, 255;
  --accent-100: 219, 234, 254;
  --accent-200: 191, 219, 254;
  --accent-300: 147, 197, 253;
  --accent-400: 96, 165, 250;
  --accent-500: 59, 130, 246;
  --accent-600: 37, 99, 235;
  --accent-700: 29, 78, 216;
  --accent-800: 30, 64, 175;
  --accent-900: 30, 58, 138;
  --accent-950: 23, 37, 84;

  --green-50: 236, 253, 245;
  --green-100: 209, 250, 229;
  --green-200: 167, 243, 208;
  --green-300: 110, 231, 183;
  --green-400: 52, 211, 153;
  --green-500: 16, 185, 129;
  --green-600: 5, 150, 105;
  --green-700: 4, 120, 87;
  --green-800: 6, 95, 70;
  --green-900: 6, 78, 59;
  --green-950: 2, 44, 34;
}

.bounty-grid {
  display: grid;
  gap: 0.5rem;
}

.bounty-grid.bounty-grid-clamp > *:not(:first-child) {
  display: none;
}

@media (min-width: 640px) {
  .bounty-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bounty-grid.bounty-grid-clamp > *:nth-child(-n + 2) {
    display: block;
  }
}

@media (min-width: 768px) {
  .bounty-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bounty-grid.bounty-grid-clamp > *:nth-child(-n + 3) {
    display: block;
  }
}

@keyframes bounty-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.bounty-grid {
  --gradient-to: rgba(var(--accent-400), 0.4);
  --gradient-from: rgba(var(--accent-400), 0.2);
  --gradient-stops: var(--gradient-from), rgba(var(--accent-400), 0.3),
    var(--gradient-to);
}

.bounty-grid.dark {
  --gradient-to: rgba(var(--accent-600), 0.2);
  --gradient-from: rgba(var(--accent-600), 0.3);
  --gradient-stops: var(--gradient-from), rgba(var(--accent-600), 0.4),
    var(--gradient-to);
}

.bounty-grid .bounty-card {
  text-decoration-line: none;
  display: block;
  position: relative;
  border-radius: 0.5rem;
  border-width: 1px;
  height: 100%;
  background-image: linear-gradient(to bottom right, var(--gradient-stops));
}

.bounty-grid .bounty-card *,
.bounty-grid .bounty-skeleton * {
  transition-property: background-color, color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.bounty-grid .bounty-card:hover {
  border-color: rgb(var(--gray-400));
}

.bounty-grid .bounty-card .bounty-content {
  position: relative;
  padding: 1rem;
  height: 100%;
}

.bounty-grid .bounty-card .bounty-reward {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: rgb(var(--green-500));
}

.bounty-grid .bounty-card .bounty-issue {
  margin-top: 0.125rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(var(--gray-700));
}

.bounty-grid .bounty-card .bounty-title {
  margin-top: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  line-height: 1.25;
  color: rgb(var(--gray-800));
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bounty-grid.dark .bounty-card .bounty-reward {
  color: rgb(var(--green-400));
}

.bounty-grid.dark .bounty-card .bounty-issue {
  color: rgb(var(--accent-200));
}

.bounty-grid.dark .bounty-card .bounty-title {
  color: rgb(var(--accent-50));
}

.bounty-grid .bounty-card:hover {
  background-color: rgba(var(--gray-300), 0.1);
  border-color: rgb(var(--gray-400));
}

.bounty-grid .bounty-card:hover .bounty-reward {
  color: rgb(var(--green-600));
}

.bounty-grid .bounty-card:hover .bounty-issue {
  color: rgb(var(--gray-800));
}

.bounty-grid .bounty-card:hover .bounty-title {
  color: rgb(var(--gray-900));
}

.bounty-grid.dark .bounty-card:hover {
  background-color: rgba(var(--gray-600), 0.05);
  border-color: rgb(var(--accent-500));
}

.bounty-grid.dark .bounty-card:hover .bounty-reward {
  color: rgb(var(--green-300));
}

.bounty-grid.dark .bounty-card:hover .bounty-issue {
  color: rgb(var(--accent-100));
}

.bounty-grid.dark .bounty-card:hover .bounty-title {
  color: white;
}

.bounty-grid .bounty-skeleton {
  border-radius: 0.5rem;
  background-color: rgb(var(--gray-200));
  animation: bounty-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  height: 143px;
}

.bounty-grid.dark .bounty-skeleton {
  background-color: rgb(var(--gray-800));
}

.bounty-grid .bounty-skeleton .bounty-content {
  position: relative;
  padding: 1rem;
  height: 100%;
}

.bounty-grid .bounty-skeleton .bounty-reward {
  margin-top: 0.25rem;
  border-radius: 0.375rem;
  height: 25px;
  width: 59px;
  background-color: rgb(var(--gray-300));
}

.bounty-grid .bounty-skeleton .bounty-issue {
  margin-top: 0.625rem;
  border-radius: 0.375rem;
  height: 14px;
  width: 86px;
  background-color: rgb(var(--gray-300));
}

.bounty-grid .bounty-skeleton .bounty-title {
  margin-top: 1rem;
  border-radius: 0.375rem;
  height: 20px;
  background-color: rgb(var(--gray-300));
}

.bounty-grid.dark .bounty-skeleton .bounty-reward {
  background-color: rgb(var(--gray-700));
}

.bounty-grid.dark .bounty-skeleton .bounty-issue {
  background-color: rgb(var(--gray-700));
}

.bounty-grid.dark .bounty-skeleton .bounty-title {
  background-color: rgb(var(--gray-700));
}
